<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>视频上传</title>
</head>
<body>
<p class="upload"> <p class="uploadBox">
    <span class="inputCover">选择文件</span>
<form enctype="">
    <input type="file" name="file" id="file" />
    <button type="button" class="submit">上传</button>
</form>
<button type="button" class="upagain">继续上传</button>
<span class="processBar"></span>
<span class="processNum">未选择文件</span>
</p>
</p>
</body>
<script type="text/javascript" src="/static/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        var inputCover = $(".inputCover");
        var processNum = $(".processNum");
        var processBar = $(".processBar");
        //上传准备信息
        $("#file").change(function(){
            var file = document.getElementById('file');
            var fileName = file.files[0].name;
            var fileSize = file.files[0].size;
            processBar.css("width",0);
            //验证要上传的文件
            if(fileSize > 1024*50*1024){
                inputCover.html("<font>文件过大，请重新选择</font>");
                processNum.html('未选择文件');
                document.getElementById('file').value = '';
                return false;
            }else if(fileSize < 1024*1024){
                inputCover.html("<font>文件过小，请重新选择</font>");
                processNum.html('未选择文件');
                document.getElementById('file').value = '';
                return false;
            }else{
                inputCover.html(fileName+' / '+parseInt(fileSize/1024)+'K');
                processNum.html('等待上传');
            }
        });
        //提交验证
        $(".submit").click(function(){
            if($("#file").val() == ''){
                alert('请先选择文件！');
            }else{
                upload();
            }
        });
        //创建ajax对象，发送上传请求
        function upload(){
            var file = document.getElementById('file').files[0];
            var form = new FormData();
            form.append('myfile',file);
            $.ajax({
                url: '/index/lockie/upvideo',//上传地址
                async: true,//异步
                type: 'post',//post方式
                data: form,//FormData数据
                processData: false,//不处理数据流 !important
                contentType: false,//不设置http头 !important
                xhr:function(){
                    //获取上传进度
                    var myXhr = $.ajaxSettings.xhr();
                    if(myXhr.upload){
                        //监听progress事件
                        myXhr.upload.addEventListener('progress',function(e){
                            var loaded = e.loaded;//已上传
                            var total = e.total;//总大小
                            var percent = Math.floor(100*loaded/total);//百分比
                            processNum.text(percent+"%");//数显进度
                            processBar.css("width",percent+"px");//图显进度
                        }, false);
                    }
                    return myXhr;
                },
                success: function(data){
                    //上传成功回调
                    console.log(data);//获取文件链接
                    $(".submit").text('上传成功');
                    $(".upagain").css("display","block");
                }
            });
        }
        //继续上传
        $(".upagain").click(function(){
            $("#file").click();
            processNum.html('未选择文件');
            processBar.css("width",0);
            $(".submit").text('上传');
            document.getElementById('file').value = '';
            $(this).css("display","none");
        });
    })
</script>
</html>